import Taro, {Component} from '@tarojs/taro'
import {Button, Text, View} from '@tarojs/components'

export default class XhlList extends Component {
  config = {
    navigationBarTitleText: '列表'
  }

  onToXhl1(){
    // 跳转到目的页面，打开新页面
    Taro.navigateTo({
      url: '/pages/xhl1/xhl1'
    }).then(() => {
      console.log('xhl1加载完毕！')
    })
    // 关闭当前页面，返回上一页面或多级页面。
    // Taro.navigateBack({ delta: 2 })
  }
  onToXhl2(){
    // 跳转到目的页面，打开新页面
    Taro.navigateTo({
      url: '/pages/xhl2/xhl2'
    })
  }
  onToXhl3(){
    // 跳转到目的页面，在当前页面打开
    // Taro.redirectTo({
    //   url: '/pages/xhl3/xhl3'
    // })
    // 跳转到目的页面，打开新页面
    Taro.navigateTo({
      url: '/pages/xhl3/xhl3'
    })
  }
  onToXhl4(){
    // 跳转到目的页面，打开新页面
    Taro.navigateTo({
      url: '/pages/xhl4/xhl4'
    })
  }
  onToXhl5(){
    // 跳转到目的页面，打开新页面
    Taro.navigateTo({
      url: '/pages/xhl5/xhl5'
    })
  }
  onToXhl6(){
    // 跳转到目的页面，打开新页面
    Taro.navigateTo({
      url: '/pages/xhl6/xhl6'
    })
  }
  onToXhl7(){
    // 跳转到目的页面，打开新页面
    Taro.navigateTo({
      url: '/pages/xhl7/xhl7'
    })
  }
  onToXhl8(){
    // 跳转到目的页面，打开新页面
    Taro.navigateTo({
      url: '/pages/xhl8/xhl8'
    })
  }
  onToXhl9(){
    // 跳转到目的页面，打开新页面
    Taro.navigateTo({
      url: '/pages/xhl9/xhl9'
    })
  }
  onToXhl10(){
    // 跳转到目的页面，打开新页面
    Taro.navigateTo({
      url: '/pages/xhl10/xhl10'
    })
  }
  onToXhl11(){
    // 跳转到目的页面，打开新页面
    Taro.navigateTo({
      url: '/pages/xhl11/xhl11'
    })
  }
  onToXhlMore(){
    if (process.env.TARO_ENV === 'weapp') {
      console.log('weapp')
    } else if (process.env.TARO_ENV === 'h5') {
      console.log('h5')
    }
  }
  onToXhl12(){
    // 跳转到目的页面，打开新页面
    Taro.navigateTo({
      url: '/pages/xhl12/xhl12'
    })
  }

  render() {
    return (
      <View>
        <Text>我是列表，路由功能</Text>
        <Button onClick={this.onToXhl1}>组件的外部样式和全局样式</Button>
        <Button onClick={this.onToXhl2}>JSX 简介</Button>
        <Button onClick={this.onToXhl3}>组件化 & Props & 生命周期 & State</Button>
        <Button onClick={this.onToXhl4}>事件处理</Button>
        <Button onClick={this.onToXhl5}>条件渲染</Button>
        <Button onClick={this.onToXhl6}>列表渲染</Button>
        <Button onClick={this.onToXhl7}>函数式组件</Button>
        <Button onClick={this.onToXhl8}>Context</Button>
        <Button onClick={this.onToXhl9}>Hooks</Button>
        <Button onClick={this.onToXhl10}>Children 组合</Button>
        <Button onClick={this.onToXhl11}>Refs 引用</Button>
        <Button onClick={this.onToXhlMore}>内置环境变量-{process.env.TARO_ENV === 'weapp' ? 'weapp' : '别的'}</Button>
        <Button onClick={this.onToXhl12}>视图容器</Button>
      </View>
    )
  }
}
